Service Flow

The Service Flow page shows a waterfall view of all the third parties that load on your site. By default, the services appear in the order in which they load. Use this page to determine which resources are having the biggest impact on your site performance and which resources to sequence based on that information.

To open the Service Flow page, click Inventory > Service Flow.

At the top right of the page, the following tools appear.

Page category	Filter the list by page category (for example: All Pages, Sale, Account).
% of Pages	Filter the list based on the percent of pages that the services load on.
Third-party category	Filter the list by third-party category (for example: All Categories, A/B Testing, Ad Tech).
Impact	Filter the list by whether or not the services impact onload time.
Search	Use the search bar to find a specific third party.

Above the table, there is a key to the symbols that appear in the Waterfall column. Additional details are provided below.

Blue rectangle (no fill)	Resource clusters, or groups of resources (images, videos, scripts, and so on) that the third party loads. These can load before or after the average first byte time.
Horizontal blue bar	The time it takes the third party to load, from start time to last byte.
Vertical colored lines	The vertical lines correspond to the timing metrics of the same color. The blue line is onload the time it takes for the initial HTML document to load with all stylesheets, images, and subframes. At this point, the page is usually interactive to users. "Onload time" is equal to the high-resolution timestamp returned by the PerformanceNavigationTiming.loadEventEnd property. time. The following metrics are available:  First Contentful Paint When the browser renders the first bit of content from the DOM, which signals to the user that the page is loading. This content can include text, image (including background images), non-white canvas or SVG. DOMContentLoaded The amount of time it takes for the initial HTML document to be loaded and parsed, without waiting for stylesheets, JavaScript, and other resources. Onload The amount of time it takes for the initial HTML document to be loaded with all stylesheets, images, and subframes, and all event handlers for window.onload to be called. At this point, the page is interactive to users. Throughout the Yottaa portal, "onload time the time it takes for the initial HTML document to load with all stylesheets, images, and subframes. At this point, the page is usually interactive to users. "Onload time" is equal to the high-resolution timestamp returned by the PerformanceNavigationTiming.loadEventEnd property. " is used interchangeably with "page load time."  Largest Contentful Paint The time it takes for the largest piece of visible content on a page to load. Time to Interactive Measures the time when the page becomes reliably interactive to users by searching for a five-second pause in network activity after the last long task following the first contentful paint. TTI is the moment when that long task ends. If there is no long task after first contentful paint, TTI is the moment that first contentful paint is complete.

Details View

Click the arrow next to any third party to see additional metrics, including the number of page delay violations the third party and its resources are causing.

The details view shows a variety of metrics, including: 

Example	Metric	Description
	Performance Index Rating (PIR)	PIR, or Performance Index Rating, uses Yottaa-exclusive data to evaluate the performance of a third party across the industry. The rating does not necessarily represent the third party's impact on your site. PIR ratings include:  Consistent negative impact on performance Inconsistent negative impact on performance Little to no impact on performance.
	Third Party Details	Opens the Third-party Details page.
	Compare vs. Community	Opens the Third Party Community Dashboard for the third party.
	Resources per Page	The number of resources Any request initiated by the browser, including HTML, CSS, JS, photos, videos, and so on. that the third party loads on each page it runs on.
	Page Delay Violations	The total number of page delay violations that the third party has caused during the specified period.
	Page Delay Violations Per Page	The average number of page delay violations When a resource that loads before onload takes longer than a set number of milliseconds to load. the third party causes per page.
	Page Delay Violations Per Resource	The average number of page delay violations the third party causes per resource.
	Impact on Metrics	Shows the third party's impact on Page Load Time the time it takes for the initial HTML document to load with all stylesheets, images, and subframes. At this point, the page is usually interactive to users. "Onload time" is equal to the high-resolution timestamp returned by the PerformanceNavigationTiming.loadEventEnd property., DOM Content Loaded When the initial HTML document is completely loaded and parsed., Largest Contentful Paint, and Time to Interactive.

The details view also shows how much time you can save by delaying the third party's loading until after onload -- both on the pages on which it is installed and on your overall site.

To see what the third party's loading would look like if delayed until after onload, click Show Impact Scenario. This option only displays for third parties that take more than 0 seconds to load. The waterfall view changes to reflect the impact scenario.

A table displays detailed information about the third party. Use the drop-down menu to select the information that you want to view. The following options are available: 

Determining What to Sequence

The Service Flow page gives you access to a variety of metrics that help you determine how to optimize your site performance. When determining which third parties to sequence, take into account these considerations: 

Waterfall	The order in which third parties load has a big impact on your site performance. As you look at the Service Flow list, pay attention to which third parties load first -- are these services the most important to your site's loading? If not, consider delaying them until after onload.
Page %	As you consider which third parties to apply rules to, also take note of the Page % column. A third party that has a moderate impact, but only loads on a small percent of your pages is likely not the most important candidate for a new rule.
Impact	To get a better idea of which third parties are causing the biggest delay, you can sort the list by Impact by clicking twice on the Impact column heading. Click the arrow to see what impact the third party has on your overall site and to test impact scenarios.
Resources	There might be cases where a third party is having a high impact but you can't, or don't want to, delay it. In this case, you can look at the Top Contributing Resources of the third party to see which resource is having the biggest impact, and then potentially set a rule to control that resource.